<template>
  <div class="mh-100p">
    <el-menu :default-active="biddingMethod" mode="horizontal" class="bdr-top-10">
      <el-menu-item @click="getBills('')" index="">全部</el-menu-item>
      <el-menu-item @click="getBills('0')" index="0">一口价
        <v-plain-tips :num="offerTips.priceCount"/>
      </el-menu-item>
      <el-menu-item @click="getBills('1')" index="1">竞价
        <v-plain-tips :num="offerTips.biddingCount"/>
      </el-menu-item>
    </el-menu>
    <div class="bg-fff pd-10 fx-1 bdr-bottom-10">
      <div class="top">
        <el-radio-group v-model="inquiryStatus" @change="getBills()">
          <el-radio-button :label="item.value" v-for="item in $dict.offerTypes" :key="item.value">
            {{item.label}}
            <v-plain-tips :num="offerTips.inInquiryCount" v-if="item.value===1" class="tips"/>
            <v-plain-tips :num="offerTips.employerQuotedCount" v-if="item.value===2" class="tips"/>
          </el-radio-button>
        </el-radio-group>
        <em class="fx-1"></em>
        <!--<el-checkbox v-model="isCard" label="卡片模式" border></el-checkbox>-->
        <i class="viweExplain">视图：</i>
        <span class="qiehuan-box">
          <i class="iconfont icon-qiapianshi icon-qiehuan-card" :class="{'isCardActive':isCard}" @click="switchoverCard(true)"></i>
          <i class="iconfont icon-liebiaoshi icon-qiehuan-card" :class="{'isCardActive':!isCard}" @click="switchoverCard(false)"></i>
        </span>
      </div>
      <div class="panel">
        <v-bill-card-offer-list v-if="isCard" :bills="bills" @change="changePage" @emitRecall="emitRecall" @emitDeal="emitDeal"
                                @showTransInfo="showTransInfo"></v-bill-card-offer-list>
        <v-plain-table v-else :data="bills" @change="changePage">
          <template slot="expand" slot-scope="{scope}">
            <el-button type="text" @click="$router.push(`./detail/${scope.row.id}`)">详情</el-button>
            <el-button type="text" v-if="scope.row.inquiryStatus===2"
                       @click="showTransInfo(scope.row)">交易
            </el-button>
            <el-button type="text" @click="revokeinquiry(scope.row)">撤回</el-button>

          </template>
        </v-plain-table>
      </div>
    </div>

    <v-plain-dialog
            title="确认交易"
            width="60%"
            ref="trans">
      <v-bill-trans-info :transInfo="currentTransInfo">
        <el-checkbox v-model="agreement"></el-checkbox>
        同意
        <el-button type="text" @click="download()">《票据应收款转让服务合同》</el-button>
        <div class="o">
          <el-button type="default" plain @click="transCurrentOffer(false)">取消</el-button>
          <el-button type="primary" :disabled="!agreement" @click="transCurrentOffer(true)">确认交易</el-button>
        </div>
      </v-bill-trans-info>
    </v-plain-dialog>
    <v-contract-dialog ref="contract-dialog" :contractInfo="currentTransInfo"/>
  </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator'
    import vBillCardOfferList from '@/components/bill-card-offer-list'
    import vPlainTable from '@/components/plain-table'
    import vPlainDialog from '@/components/plain-dialog'
    import vBillDetail from '@/components/bill-detail'
    import vBillTransInfo from '@/components/bill-trans-info'
    import vPlainTips from '@/components/plain-tips'
    import { Action, Getter } from 'vuex-class'
    import vContractDialog from '../contract/contract.vue'

    @Component({
        components: {
            vBillCardOfferList, vPlainTable, vPlainDialog, vBillDetail, vBillTransInfo,vPlainTips, vContractDialog
        }
    })
    export default class Order extends Vue {
        inquiryStatus = 0
        biddingMethod = ''
        isCard = false
        bills: TableData = {
            header: [
                {
                    key: 'billNumber',
                    label: '票据号'
                },
                {
                    key: 'expiryDate',
                    label: '到期日'
                },
                {
                    key: 'faceValue',
                    label: '票面金额'
                },
                {
                    key: 'billEveryDeduction',
                    label: '每十万扣款'
                },
                {
                    key: 'optimalTransferAmount',
                    label: '转让额'
                },
                {
                    key: 'inquiryStatus',
                    label: '票据状态',
                    formatter: row => this.$utils.toTypeFormat(row.inquiryStatus, this.$dict.memberInquiryStatus)
                }
            ],
            body: [],
            footer: {
                total: 0,
                currentPage: 1
            }
        }
        currentBillDetail = {}
        currentTransInfo = {}
        agreement = true

        get activeIndex () {
            return this.$route.path
        }

        created () {
          if(this.$route.query.msgType !== null && this.$route.query.msgType !== undefined) {
            this.inquiryStatus = this.$route.query.msgType
          }
        }

        switchoverCard (cardBollen) {
          if(cardBollen) {
            this.isCard = true
          }else{
            this.isCard = false
          }
        }

        async getBills (biddingMethod = '') {
            // console.log(biddingMethod)
            // this.biddingMethod = biddingMethod

            let res: AjaxResponse = await this.$axios.post('g/gateway/inquiry/inquirys', {
                pageSize: 10,
                currentPage: this.bills.footer.currentPage,
                inquiryStatus: this.inquiryStatus
                // biddingMethod: this.biddingMethod
            })
            if (res.responseCode === 200) {
                this.bills.body = res.data.items
                this.bills.footer.total = res.data.totalNum
            }
        }

        async showBillDetail ({ billId }) {
            let res: AjaxResponse = await this.$axios.get(`b/boms/bill/${billId}`)
            if (res.responseCode === 200) {
                this.currentBillDetail = res.data
                this.$refs.detail.openDialog()
            }
        }

        async emitDeal (billId) {
          let res: AjaxResponse = await this.$axios.get(`g/gateway/bill/view/${billId}`)
          if (res.responseCode === 200) {
              this.currentTransInfo = res.data
              this.$refs.trans.openDialog()
          }
        }

        async showTransInfo ({ billId, id, biddingMethod, billQuoteId }) {
            if (biddingMethod === 0) {
                id = billQuoteId
            }
            let res: AjaxResponse = await this.$axios.get(`g/gateway/bill/view/${billId}`)
            if (res.responseCode === 200) {
                this.currentTransInfo = res.data
                this.$refs.trans.openDialog()
            }

        }

        async transCurrentOffer (commit) {
            // console.log(this.currentTransInfo)
            if (commit) {
                let res: AjaxResponse = await this.$axios.post('g/gateway/txn/order', {
                    enterpriseId: JSON.parse(window.sessionStorage.getItem('userInfo')).userId,
                    billQuoteId: this.currentTransInfo.quoteId
                })
                this.$utils.tips(res)
                this.getBills()
                this.getOfferTips()
                this.getMenusTips()
            }
            this.$refs.trans.closeDialog()
        }

        changePage (page) {
            this.bills.footer.currentPage = page
            this.getBills()

        }
        async emitRecall (billId) {
          let res:AjaxResponse = await  this.$axios.put('g/gateway/inquiry/revokeinquiry',{
              inquiryId:billId
          })
          this.$utils.tips(res)
          this.getBills()
          this.getOfferTips()
          this.getMenusTips()
        }
        async revokeinquiry ({ id }) {
            let res:AjaxResponse = await  this.$axios.put('g/gateway/inquiry/revokeinquiry',{
                inquiryId:id
            })
            this.$utils.tips(res)
            this.getBills()
            this.getOfferTips()
            this.getMenusTips()
        }
        @Action getOfferTips
        @Getter offerTips
        @Action getMenusTips
        @Getter menuTips
        download(){
            this.$refs['contract-dialog'].openDialog()
        }
        mounted () {
            this.getBills()
            this.getOfferTips()
        }
    }
</script>

<style lang="less" scoped>
  .mh-100p {
    display: flex;
    flex-direction: column;
  }

  .bg-fff {
    margin-top: 10px;
  }

  .bg-fff {
    margin-top: 10px;
  }

  .top {
    display: flex;
    padding-bottom: 20px;
  }

  .operation {
    margin-top: 20px;
  }

  .el-pagination {
    float: right;
    margin-top: 20px;
  }
  .tips {
    position: absolute;
    right: 2px;
    top: 10px;
  }
  .icon-qiehuan-card {
    display: inline-block;
    font-size: 24px;
    cursor: pointer;
    height: 38px;
    color: #ddd;
    width: 43.5px;
    text-align: center;
    padding: 0;
  }
  .icon-qiapianshi {
    border-right: 1px solid #ddd;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .icon-liebiaoshi {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .qiehuan-box {
    width: 90px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    height: 40px;
    line-height: 40px;
    display: flex;
  }
  .isCardActive {
    background: #f2f6f9;
  }
  .viweExplain {
    color: #666;
    line-height: 40px;
  }
</style>
